<template>
  <div class="event-container">
    <el-row>
      <el-col :span="21">
        <h1 class="event-title">{{ $t('pageOverview.eventLogs') }}</h1>
      </el-col>
      <el-col :span="3">
        <a :href="href" :download="download">
          <el-button type="text">
            {{ $t('global.action.exportAll') }}
          </el-button>
        </a>
        <span>|</span>
        <router-link
          class="view-more-link align-middle"
          to="/diagnostic/event-logs"
        >
          {{ $t('pageOverview.viewMore') }}
        </router-link>
      </el-col>
    </el-row>
    <el-row class="event-body">
      <el-col :span="13">
        <dl>
          <dt>{{ $t('pageOverview.criticalEvents') }}：</dt>
          <dd class="h3">
            {{ criticalEvents.length ? criticalEvents.length : '--' }}
            <el-icon color="#dc143c" class="no-inherit">
              <circle-close-filled />
            </el-icon>
          </dd>
        </dl>
        <dl>
          <dt>{{ $t('pageOverview.warningEvents') }}：</dt>
          <dd class="h3">
            {{ warningEvents.length ? warningEvents.length : '--' }}
            <el-icon color="#ffd700" class="no-inherit"
              ><warning-filled
            /></el-icon>
          </dd>
        </dl>
        <dl>
          <dt>{{ $t('pageOverview.infoEvents') }}：</dt>
          <dd class="h3">
            {{ normalEventsLength ? normalEventsLength : '--' }}
            <el-icon color="#409efc" class="no-inherit"
              ><success-filled
            /></el-icon>
          </dd>
        </dl>
      </el-col>
      <el-col :span="11">
        <div ref="echart" style="width: 400px; height: 220px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { useEventLogStore } from '@/store/Diagnostic/EventLog/EventLogStore';
import { useI18n } from 'vue-i18n';
import {
  CircleCloseFilled,
  WarningFilled,
  SuccessFilled,
} from '@element-plus/icons-vue';

const i18n = useI18n();
const eventLogStore = useEventLogStore();

const echart = ref();
const eventLogData = computed(() => eventLogStore.allEvents);
const criticalEvents = computed(() =>
  eventLogData.value
    .filter((log) => log.severity === 'Critical')
    .map((log) => {
      return log;
    }),
);
const warningEvents = computed(() =>
  eventLogData.value
    .filter((log) => log.severity === 'Warning')
    .map((log) => {
      return log;
    }),
);
const normalEventsLength = computed(
  () =>
    eventLogData.value.length -
    warningEvents.value.length -
    criticalEvents.value.length,
);
const dataForExport = computed(() => JSON.stringify(eventLogData.value));
const href = computed(
  () => `data:text/json;charset=utf-8,${dataForExport.value}`,
);
const download = computed(() => {
  let date: string | Date = new Date();
  date =
    date.toISOString().slice(0, 10) +
    '_' +
    date.toString().split(':').join('-').split(' ')[4];
  let fileName = 'all_event_logs_';
  return fileName + date + '.json';
});

const initChart = () => {
  const chart = echarts.init(echart.value);
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'right',
    },
    series: [
      {
        type: 'pie',
        radius: ['39%', '78%'],
        avoidLabelOverlap: false,
        data: [
          {
            value: warningEvents.value.length,
            name: i18n.t('pageOverview.warningEvents'),
            itemStyle: { color: '#FFD700' },
          },
          {
            value: criticalEvents.value.length,
            name: i18n.t('pageOverview.criticalEvents'),
            itemStyle: { color: '#DC143C' },
          },
          {
            value: normalEventsLength.value,
            name: i18n.t('pageOverview.infoEvents'),
            itemStyle: { color: '#1E90FF' },
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  eventLogStore.getEventLogData();
});

watch(eventLogData, () => {
  initChart();
});
</script>

<style lang="scss" scoped>
.status-icon {
  vertical-align: text-top;
}
.event-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 0px;
  }
}
.event-title {
  font-size: 22px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 30px;
  margin-bottom: 30px;
}
dt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
dd {
  margin-bottom: 0;
  font-size: 22px;
}
.event-body > .el-col:first-child {
  padding-left: 250px;
}
.view-more-link {
  color: #409eff;
  text-decoration: none;
}
.el-button {
  font-size: 16px;
}
.el-icon {
  vertical-align: sub;
  font-size: 29px;
}
</style>
